<template>
	<view class="detail-box">
		<view class="item-list">
			<view class="item">
				<text class="l">订单编号</text>
				<text class="val">{{detail.orderId}}</text>
			</view>
			<view class="item">
				<text class="l">问题描述</text>
			</view>
			<view class="item">
				<text class="val" style="text-align: left;">{{detail.question}}</text>
			</view>
			<view class="item mtb">
				<text class="l">是否申请退款</text>
				<text class="val">{{detail.isApplyRefund==1?'是':'否'}}</text>
			</view>
			<view class="item">
				<text class="l">状态</text>
				<text class="val" :class="{'success-color':detail.questionStauts==4 || detail.questionStauts==5 || detail.questionStauts==6}">{{txt(detail.questionStauts)}}</text>
			</view>
		</view>
		<view class="wt-img">
			<image v-for="(img,index) in questionImg" :key="index" :src="img"></image>
		</view>
	</view>
</template>

<script>
	import { getQueryMyQuestionDetail } from '@/api/aft.js'
	export default {
		data() {
			return {
				detail: {},
				def: {},
				questionImg: []
			};
		},
		onLoad(ops) {
			this.def = ops
			this.getInfo()
		},
		methods: {
			getInfo(){
				getQueryMyQuestionDetail({id:this.def.id}).then((res) => {
					this.detail = res
					this.questionImg = res.questionImg ? res.questionImg.split(',') : []
				})
			},
			txt(num){
				let str
				if(num == 1) {
					str = '提交中'
				}
				if(num == 2) {
					str = '处理中'
				}
				if(num == 3) {
					str = '退款审核中'
				}
				if(num == 4) {
					str = '退款审核通过'
				}
				if(num == 5) {
					str = '退款完成'
				}
				if(num == 6) {
					str = '问题结案'
				}
				return str
			},
		}
	}
</script>

<style lang="less" scoped>
.detail-box{
	padding-top: 32rpx;
}
.item-list{
	height: 496rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(228,73,91,0.05);
	border-radius: 16rpx;
	margin: 0 32rpx;
	margin-bottom: 28rpx;
	.item{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		display: flex;
		margin: 0 30rpx;
		padding-top: 30rpx;
		.val{
			color: #666;
			flex: 1;
			text-align: right;
		}
		.slz{
			color: #ED4235;
		}
		.wc{
			color: #E4919D;
		}
	}
	.item:nth-child(2){
		padding-top: 50rpx;
		margin-bottom: 15rpx;
	}
		
	.mtb{
		padding-top: 80rpx;
		margin-bottom: 35rpx;
	}
}
.wt-img{
	margin: 0 32rpx;
	image{
		width: 228rpx;
		height: 228rpx;
		margin-right: 6rpx;
	}
}
</style>
